<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 拓展执行环境(执行空间)的 
    // 全局的执行空间 => GO对象  => 存储全局的变量和方法 =>  当前窗口关闭时被释放
    // 函数的执行空间 => AO对象  => 存储函数中声明的变量/方法  => 一般情况下 当函数执行完毕关联的AO对就会被释放

    // debugger;

    // 全局变量(全局作用域)   => 存储在window中 (GO对象  => 当前窗口关闭时被释放)
    // var a = 10;
    // var b = 20;

    // // 每个函数运行时都会产生一个执行环境(执行空间) => JS会给此空间关联一个AO对象 =>  存储此函数中声明的变量/方法 (一般情况下 当函数执行完毕关联的AO对就会被释放)
    // function fn(){
    //     // 局部变量(函数作用域/局部作用域)  =>  AO对象(Activation Object) => 存储函数中声明的变量/方法
    //     var a = 100;
    //     var b = 200;
    // }
    // fn();


    // 函数嵌套

    debugger;
    // GO = {a:10 -> 100, b: 20}
    var a = 10;
    var b = 20;
    console.log("1",a, b); // 10 20 

    // 每个函数运行时都会产生一个执行环境(执行空间) => JS会给此空间关联一个AO对象 
    function fn() {
        // 局部变量(函数作用域/局部作用域)  =>  AO对象(Activation Object) => 存储函数中声明的变量/方法
        // AO(fn) = { b:200, func:func  } 
        a = 100;
        var b = 200;
        console.log("2",a, b);  // 100 200 

        function func() {
            // AO (func) ={a:1000, 2000} 
            var a = 1000;
            var b = 2000;
            console.log("3",a,b); // 1000 2000
        }
        func();
    }
    fn();
    console.log("4",a,b); // 100 20






</script>

</html>